<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>BMI计算器</title>
    <link rel="stylesheet" href="../../bootstrap/bootstrap.min.css">
</head>

<body>
    <div class="container mt-5">
        <h1 class="mb-4">BMI计算器</h1>
        <form>
            <div class="form-group">
                <label for="height">身高(cm)：</label>
                <input type="number" class="form-control" id="height" min="1">
            </div>
            <div class="form-group">
                <label for="weight">体重(kg)：</label>
                <input type="number" class="form-control" id="weight" min="1">
            </div>
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="standardRadios" id="chinaStandardRadio"
                    value="chinaStandard" checked>
                <label class="form-check-label" for="chinaStandardRadio">中国标准</label>
            </div>
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="standardRadios" id="internationalStandardRadio"
                    value="internationalStandard">
                <label class="form-check-label" for="internationalStandardRadio">国际标准</label>
            </div><br />
            <button type="button" class="btn btn-primary mt-3" onclick="calculate()">计算BMI值</button>
        </form>
        <div id="result" class="mt-4"></div>
    </div>
    <script src="https://cdn.bootcss.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
    <script>
        function calculate() {
            const height = parseInt(document.getElementById("height").value);
            const weight = parseInt(document.getElementById("weight").value);
            const standard = document.querySelector('input[name="standardRadios"]:checked').value;

            if (isNaN(height) || isNaN(weight)) {
                alert("请输入数字！");
                return;
            }

            if (height <= 0 || weight <= 0) {
                alert("身高和体重必须大于0！");
                return;
            }

            let bmiValue = "";
            let bmiStatus = "";
            let bmi = 0;
            if (standard === "chinaStandard") {
                bmi = weight / ((height / 100) ** 2);
                bmiValue = bmi.toFixed(1);
                if (bmi < 18.5) {
                    bmiStatus = "偏瘦";
                } else if (bmi < 24) {
                    bmiStatus = "正常";
                } else if (bmi < 28) {
                    bmiStatus = "超重";
                } else {
                    bmiStatus = "肥胖";
                }
            } else if (standard === "internationalStandard") {
                bmi = weight / ((height / 100) ** 2);
                bmiValue = bmi.toFixed(1);
                if (bmi < 16) {
                    bmiStatus = "严重消瘦";
                } else if (bmi < 17) {
                    bmiStatus = "中度消瘦";
                } else if (bmi < 18.5) {
                    bmiStatus = "轻度消瘦";
                } else if (bmi < 25) {
                    bmiStatus = "正常";
                } else if (bmi < 30) {
                    bmiStatus = "超重";
                } else if (bmi < 35) {
                    bmiStatus = "I度肥胖";
                } else if (bmi < 40) {
                    bmiStatus = "II度肥胖";
                } else {
                    bmiStatus = "III度肥胖";
                }
            }

            const resultElement = document.getElementById("result");
            resultElement.innerHTML = `<p>BMI值：${bmiValue}</p><p>身体状况：${bmiStatus}</p>`;
        }
    </script>
</body>

</html>